/**
 * Created by ziyu on 17/5/15.
 */

import React from 'react'
import {Button, Card, Icon, Modal, Table} from 'antd'
import Styles from '../Index.less'
import {fetchPost} from '../../../../../utils/request'
import AddRecord from './AddRecord'

class Relation extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userId: props.userId,
      tradeNo: props.userId,
      isNBFCAdmin: props.isNBFCAdmin,
      data: [],
      message: '',
      timer: null,
      id: props.id,
      item: props.item,
      collectionType: props.collectionType,
      visible: false,
      addRecordInfo: {}
    }
  }

  componentWillReceiveProps(props) {
    if (this.state.id != props.id) {
      this.setState({
        userId: props.userId,
        tradeNo: props.userId,
        id: props.id,
        item: props.item,
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount() {
    this.getData()
  }

  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }

  getData() {
    if (this.state.tradeNo != null) {
      fetchPost(`/collection/v2/emergency/contacts/list`, {
        tradeNo: this.state.tradeNo
      }).then(json => {
        if (json.data != null && json.code === 0) {
          this.setState({
            data: json.data.contacts,
          })
        } else {
          this.setState({
            data: [],
            message: json.msg,
          })
        }
      })
    } else {
      this.setState({
        data: [],
      })
    }
  }

  message() {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: '',
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon
          type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }


  showModal(record) {
    this.setState({
      visible: true,
      addRecordInfo: {
        userCode: this.state.userId,
        tradeNo: this.state.item.tradeNo,
        collectionNo: this.state.item.collectionNo,
        followId: this.state.item.followId,
        followUp: this.state.item.followUp,
        name: record.name,
        mobile: record.mobile,
      }
    })
  };

  handleOk = e => {
    this.getData()
    this.setState({
      visible: false,
    })
  }

  handleCancel = e => {
    this.setState({
      visible: false,
    })
  }

  render() {
    let columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Relative',
        dataIndex: 'relation',
        key: 'relation',
      },
      {
        title: 'Mobile',
        dataIndex: 'mobile',
        key: 'mobile'
      },
      {
        title: 'Last contact time',
        render: (record) => {
          if (record.lastCallTime) {
            return (<p>{record.lastCallTime}(<span style={{color: 'red'}}>{record.lastCallDescribe}</span>)
            </p>)
          }
        },
      },
      {
        title: 'Contact record',
        dataIndex: 'collectionContactRecord',
        key: 'collectionContactRecord'
      },
      {
        title: 'Operate',
        render: (record) => (
          <Button type='primary' size='small' onClick={() => this.showModal(record)}>Record</Button>
        )
      }
      ,
    ]

    return (

      <div className={Styles.detailModule}>
        <Card title='Contact Info' extra={this.message()}
              bodyStyle={{padding: 0, minHeight: 100, overflowY: 'scroll'}} noHovering={true}>
          <Table
            size='small'
            pagination={false}
            bordered
            dataSource={this.state.data}
            columns={columns}
            key='name'
          />
        </Card>
        <Modal
          title="Record"
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
        >
          <AddRecord onOk={this.handleOk} info={this.state.addRecordInfo}/>
        </Modal>
      </div>
    )
  }
}

export default Relation
